<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('修改活动')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-activity-edit" th:object="${activity}">
		<input type="hidden" name="id" th:field="*{id}" />
		<input type="hidden" name="userId" th:field="*{userId}" />

		<!-- 活动标题 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">活动标题：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" name="title" th:field="*{title}" required />
			</div>
		</div>

		<!-- 运动类别 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">运动类别：</label>
			<div class="col-sm-8">
				<select name="category" class="form-control" th:field="*{category}" required>
					<option value="">请选择</option>
					<option value="羽毛球">羽毛球</option>
					<option value="篮球">篮球</option>
					<option value="足球">足球</option>
					<option value="跑步">跑步</option>
				</select>
			</div>
		</div>

		<!-- 活动地点 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">活动地点：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" name="locationName" th:field="*{locationName}" required />
			</div>
		</div>

		<!-- 日期和时间选择 (显示用输入框 + 隐藏域存储整数) -->
		<!--		<div class="form-group">-->
		<!--			<label class="col-sm-3 control-label is-required">活动日期：</label>-->
		<!--			<div class="col-sm-8">-->
		<!--				&lt;!&ndash; 显示用的日期输入框 &ndash;&gt;-->
		<!--				<input class="form-control" type="text" id="dateDisplay" placeholder="yyyy-MM-dd" required />-->
		<!--				&lt;!&ndash; 隐藏域存储时间戳(毫秒) &ndash;&gt;-->
		<!--				<input type="hidden" id="eventDate" name="eventDate" th:field="*{eventDate}" />-->
		<!--			</div>-->
		<!--		</div>-->
		<!-- 日期和时间选择 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">活动日期：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" id="dateDisplay" placeholder="yyyy-MM-dd" required />
				<input type="hidden" id="eventDate" name="eventDate" th:field="*{eventDate}" />
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label is-required">开始时间：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" id="startTimeDisplay" placeholder="HH:mm" required />
				<input type="hidden" id="startTime" name="startTime" th:field="*{startTime}" />
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label is-required">结束时间：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" id="endTimeDisplay" placeholder="HH:mm" required />
				<input type="hidden" id="endTime" name="endTime" th:field="*{endTime}" />
			</div>
		</div>

		<!-- 价格与人数 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">团购价(元)：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" step="0.01" name="groupPrice" th:field="*{groupPrice}" required />
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label is-required">原价(元)：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" step="0.01" name="originPrice" th:field="*{originPrice}" required />
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label is-required">最大人数：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" min="1" name="maxPeople" th:field="*{maxPeople}" required />
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label is-required">最少人数：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" min="1" name="minPeople" th:field="*{minPeople}" required />
			</div>
		</div>

<!--		<div class="form-group">-->
<!--			<label class="col-sm-3 control-label">已报人数：</label>-->
<!--			<div class="col-sm-8">-->
<!--				<input class="form-control" type="number" min="0" name="joined" th:field="*{joined}" />-->
<!--			</div>-->
<!--		</div>-->

		<!-- 封面 / 描述 / 状态 -->
		<div class="form-group">
			<label class="col-sm-3 control-label">封面图：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text" name="cover" th:field="*{cover}" placeholder="http://..." />
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label">描述：</label>
			<div class="col-sm-8">
				<textarea name="description" class="form-control" th:field="*{description}"></textarea>
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label">状态：</label>
			<div class="col-sm-8">
				<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}" class="form-control">
					<option value="">请选择</option>
					<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{status}"></option>
				</select>
			</div>
		</div>
	</form>
</div>

<th:block th:include="include :: footer" />
<script th:inline="javascript">
	var prefix = ctx + "system/activity";
	// var statusDatas = [[${@dict.getType('sys_normal_disable')}]];

	// 时间转换函数（保持不变）
	function timeToMinutes(timeStr) {
		if (!timeStr) return '';
		var parts = timeStr.split(':');
		if (parts.length !== 2) return '';
		var hours = parseInt(parts[0], 10);
		var mins = parseInt(parts[1], 10);
		if (isNaN(hours) || isNaN(mins) || hours < 0 || hours > 23 || mins < 0 || mins > 59) {
			return '';
		}
		return hours * 60 + mins;
	}

	function minutesToTime(minutes) {
		if (!minutes || isNaN(minutes) || minutes < 0 || minutes > 1439) return '';
		var hours = Math.floor(minutes / 60);
		var mins = minutes % 60;
		return (hours < 10 ? '0' + hours : hours) + ':' + (mins < 10 ? '0' + mins : mins);
	}

	// 日期转换函数：增加秒级时间戳处理
	function timestampToDate(timestamp) {
		if (!timestamp || isNaN(timestamp)) return '';
		// 处理秒级时间戳（如果后端返回的是秒级）
		var timestampMs = timestamp.toString().length === 10 ? timestamp * 1000 : timestamp;
		var date = new Date(timestampMs);
		if (isNaN(date.getTime())) return '';
		var year = date.getFullYear();
		var month = (date.getMonth() + 1).toString().padStart(2, '0');
		var day = date.getDate().toString().padStart(2, '0');
		return `${year}-${month}-${day}`;
	}

	layui.use(['laydate'], () => {
		const laydate = layui.laydate;
		const activity = [[${activity}]];

		// 日期选择 - 转换为秒级时间戳（关键修改）
		laydate.render({
			elem: '#dateDisplay',
			type: 'date',
			format: 'yyyy-MM-dd',
			value: activity.eventDate ? timestampToDate(activity.eventDate) : '',
			done: function(value) {
				if (value) {
					var dateParts = value.split('-');
					var year = parseInt(dateParts[0], 10);
					var month = parseInt(dateParts[1], 10) - 1;
					var day = parseInt(dateParts[2], 10);
					var date = new Date(year, month, day);
					// 转换为秒级时间戳（除以1000）
					var timestampSeconds = Math.floor(date.getTime() / 1000);
					$('#eventDate').val(timestampSeconds);
				}
			}
		});

		// 开始时间和结束时间处理保持不变
		laydate.render({
			elem: '#startTimeDisplay',
			type: 'time',
			format: 'HH:mm',
			value: activity.startTime ? minutesToTime(activity.startTime) : '',
			done: function(value) {
				var minutes = timeToMinutes(value);
				if (minutes === '') {
					layer.msg('请输入有效的开始时间');
					$('#startTime').val('');
					return;
				}
				$('#startTime').val(minutes);
			}
		});

		laydate.render({
			elem: '#endTimeDisplay',
			type: 'time',
			format: 'HH:mm',
			value: activity.endTime ? minutesToTime(activity.endTime) : '',
			done: function(value) {
				var minutes = timeToMinutes(value);
				if (minutes === '') {
					layer.msg('请输入有效的结束时间');
					$('#endTime').val('');
					return;
				}
				var startTime = $('#startTime').val();
				if (startTime && minutes <= startTime) {
					layer.msg('结束时间必须晚于开始时间');
					$('#endTime').val('');
					return;
				}
				$('#endTime').val(minutes);
			}
		});

		// 初始化隐藏域值
		if (activity.eventDate) {
			$('#eventDate').val(activity.eventDate);
		}
		if (activity.startTime) {
			$('#startTime').val(activity.startTime);
		}
		if (activity.endTime) {
			$('#endTime').val(activity.endTime);
		}
	});

	/* 表单验证与提交 */
	function submitHandler() {
		if (!$('#eventDate').val()) {
			layer.msg('请选择活动日期');
			return;
		}
		if (!$('#startTime').val()) {
			layer.msg('请选择开始时间');
			return;
		}
		if (!$('#endTime').val()) {
			layer.msg('请选择结束时间');
			return;
		}
		if (parseInt($('#endTime').val()) <= parseInt($('#startTime').val())) {
			layer.msg('结束时间必须晚于开始时间');
			return;
		}

		if ($.validate.form()) {
			$.operate.save(prefix + "/edit", $('#form-activity-edit').serialize());
		}

	}
</script>
</body>
</html>
